import React, { useState, useEffect } from 'react'
import { IndexBar, List, SearchBar } from 'antd-mobile'
import { getCitylist, getcity, postCitylist } from '../../api'
import './Citylist.css'
import { getApi } from '../../api/index'
function Citylist() {
    const [city, setCity] = useState(true)
    const [hotCity, setHotCity] = useState<any>('')
    const [search, setSearch] = useState([])
    const [citylist, setCitylist] = useState<any[]>([])
    const [citys, setCitys] = useState<any[]>([])
    useEffect(() => {
        getCitylist().then(res => {
            console.log(res)
            setCitys(res.data.data)
        })
    }, [])
    useEffect(() => {
        getcity().then(res => {
            console.log(res)
            setCitylist(res.data.data)
        })
    }, [])
    const searchbar = () => {
        if (hotCity) {
            postCitylist(hotCity).then(res => {
                console.log(res)
                setSearch(res.data.data.name)
            })
        }
        setCity(!city)

    }

    const [value, setValue] = useState('')
    useEffect(() => {
        getApi().then(res => {
            console.log(res);
            setValue(res.data.city)

        })
    }, [])

    return (
        <div>
            <div>
                <SearchBar placeholder='请输入内容' onChange={(e) => setHotCity(e)} onSearch={searchbar} />
            </div>
            <div>{value}</div>
            <div style={{ display: city ? 'none' : 'block', width: '100%', height: '50px', backgroundColor: 'red' }}>
                邯郸
            </div>
            <div style={{ display: city ? 'block' : 'none' }}>
                <div className='citylist'>
                    {
                        citylist.map(item => {
                            return <div key={item.name}>{item.name}</div>
                        })}
                </div>

                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {
                            citys.map(group => {
                                const { title, citys } = group
                                return (
                                    <IndexBar.Panel
                                        index={title}
                                        title={`标题${title}`}
                                        key={`标题${title}`}
                                    >
                                        <List>
                                            {
                                                citys && citys.map((item: any, index: any) => (
                                                    <List.Item key={index}>{item.name}</List.Item>
                                                ))}
                                        </List>
                                    </IndexBar.Panel>
                                )
                            })}
                    </IndexBar>
                </div>
            </div>
        </div>
    )
}

export default Citylist
